<template>
	<view class="content">
		<view class="nuter" v-if="selectList.length != 0">
			<navBar @currentIndex="setIndex" :currentI="thisindex" :selectList="selectList">
			</navBar>
			<!-- <navBarTest v-else @currentIndex="setIndex" :currentI="thisindex">
			</navBarTest> -->
		</view>
		<!-- 搜索栏 -->
		<view v-if="LinkType == true" class="search" @click="goSearch">
			<van-search background="#fff" :disabled="true" placeholder="请输入剧名或其他关键字" />
		</view>
		<!-- 精选数据 -->
		<view v-if="selectList[thisindex].name == '精选'">
			<!-- 轮播图 -->
			<view class="swiper-dot">
				<uni-swiper-dot :info="bannerList" :current="current" mode="round">
					<swiper class="swiper-box" interval="3000" @change="swiperClick" autoplay="true"
						:circular="true">
						<swiper-item v-for="(item ,index) in bannerList" :key="index">
							<view class="image" @click="handelClick(item,index)">
								<image :src="item.cover_img" />
							</view>
						</swiper-item>
					</swiper>
				</uni-swiper-dot>
			</view>
			<!-- 排行榜 -->
			<van-grid column-num="4" gutter="20" :border="false" v-if="LinkType == true">
				<van-grid-item use-slot v-for="(el,index) in childrenData" :key="index" @click="goPlay(el)">
					<block v-if="!(index == 3 && !iosFlag)">
						<view class="icon-view"><image class="icon" :src="el.icon" mode="widthFix"></image></view>
						<text class="icon-text">{{el.title}}</text>
					</block>
				</van-grid-item>
			</van-grid>
		</view>
		<!-- 精选列表 -->
		<view class="selectBox" v-if="recommended.length!=0" :style="LinkType !== true ? 'padding-top:20rpx;' : ''">
			<view class="selectItem" v-for="(el,index) in recommended" :key="index" @click="goDetails(el)">
				<image class="selectImg" :src="el.cover_img" mode=""></image>
				<view class="selectText" v-if="LinkType == true">
					<van-tag v-if="el.title_label == `火爆`" type="danger">{{el.title_label}}</van-tag>
					<van-tag v-if="el.title_label == `最新`" type="warning">{{el.title_label}}</van-tag>
					<van-tag v-if="el.title_label == `独家`" color="#7232dd">{{el.title_label}}</van-tag>
					<van-tag v-if="el.title_label == `限免`" type="primary">{{el.title_label}}</van-tag>
					<text>{{el.name}}</text>
				</view>
				<text v-if="el.label !== null" class="label">{{el.label}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	import navBar from '../../wxcomponents/navBar/navBar.vue'
	import navBarTest from '../../wxcomponents/navBarTest/navBar.vue'
	import {
		getSmallTheaterClass,
		getisOnline,
		getListByType
	} from '../../module/index.js'
	const app = getApp()
	export default {
		components: {
			navBar,
			navBarTest
		},
		data() {
			return {
				LinkType: null, 
				id: 0,
				target: 0,
				thisindex: 0,
				selectList: [],
				bannerList: [],
				// false:固定數量的navbar(4 - 6個)；true:可以滑動的navbar
				childrenData: [{
					id: 1,
					title: "排行",
					icon: "../../static/paihangbang.png"
				}, {
					id: 2,
					title: "免费",
					icon: "../../static/icon6.png"
				}, {
					id: 3,
					title: "最新",
					icon: "../../static/zuixinnewchunse.png"
				}, {
					id: 4,
					title: "会员",
					icon: "../../static/huiyuan.png"
				}],
				recommended:[],
				params:{
					type_id:null,
					page:1,
					limit:10,
					total_page:0
				},
				current:0,
				iosFlag: app.globalData.iosFlag,
			}
		},
		onShow() {
			
		},
		onLoad(e) {
			// this.getisOnline()
			// if (e.video_id !== undefined) {
			// 	uni.navigateTo({
			// 		url: "/components/yjy-video-slide/yjy-video-slide?video_id=" + e.video_id +
			// 			"&video_detail_id=" + e.video_detail_id
			// 	});
			// } else if (e.saleNum !== undefined) {
			// 	uni.navigateTo({
			// 		url: "/wxcomponents/saleCost/index?saleNum=" + e.saleNum +
			// 			"&saleSend=" + e.saleSend
			// 	});
			// }
			if(uni.getStorageSync('is_online') == ''){
				this.LinkType = false
			}else{
				this.LinkType = uni.getStorageSync('is_online')
			}
			uni.setStorageSync('uid', e.uid)
			uni.setStorageSync('link_id', e.link_id)
			// 公众号进入 登录需要传的
			uni.setStorageSync('login_message', {
				official_account_id:e?.official_account_id,
				uid:e?.uid,
				video_id:e?.video_id
			})
			this.getCateData()
		},
		onUnload() {
			this.timer && clearTimeout(this.timer);
		},
		onReachBottom(){
			let {total_page,page} = this.params
			if(page>total_page>0){
				return;
			}
			if(this.params.type_id){
				this.getListByType()
			}else{
				this.getCateData()
			}
		},
		methods: {
			// 去搜索页面
			goSearch() {
				uni.navigateTo({
					url: `/wxcomponents/search/search`,
				});
			},
			// 滑動切换触发的事件
			toggle(e) {
				let index = e.detail.current
				this.target = index
			},
			//点击nav控制下面的展示
			setIndex(e) {
				this.thisindex = e;
				this.params.page = 1;
				this.recommended = []
				this.params.type_id = this.selectList[e].id
				if(this.params.type_id){
					this.getListByType()
				}else{
					this.getCateData()
				}
				
			},
			getCateData() {
				//发起请求
				getSmallTheaterClass(this.params).then((res) => {
					if (res.code === 200) {
						this.selectList = [{
							name:'精选',
							id:''
						},...res.data.type_data]
						this.bannerList = res.data.banner
						this.recommended.push(...res.data.recommended.data)
						this.params.page++
						this.params.total_page = res.data.recommended.total_page
					} else {
						uni.showToast({
							title: res.message,
							icon: "none"
						})
					}
				}).catch(err => {
					console.log(err)
				})
			},
			getListByType() {
				//发起请求
				getListByType(this.params).then((res) => {
					if (res.code === 200) {
						this.recommended.push(...res.data.data)
						this.params.page++
						this.params.total_page = res.data.total_page
					} else {
						uni.showToast({
							title: res.message,
							icon: "none"
						})
					}
				}).catch(err => {
					console.log(err)
				})
			},
			swiperClick(e) {
				this.current = e.detail.current;
			},
			handelClick(item, index) {
				if (this.LinkType == false) {
					uni.navigateTo({
						url: "/wxcomponents/testPage/index?video_id=" + item.video_id
					});
				} else {
					uni.navigateTo({
						url: "/components/yjy-video-slide/yjy-video-slide?video_id=" + item.video_id
					});
				}
			},
			// 排行榜
			goPlay(el) {
				if (el.id == 4) {
					uni.navigateTo({
						url: `/wxcomponents/MembershipCenter/MembershipCenter`,
						fail() {
							uni.switchTab({
								url: `/wxcomponents/MembershipCenter/MembershipCenter`,
								fail() {
									uni.showToast({
										title: '敬请期待',
										icon: 'none'
									});
								}
							});
						}
					});
				} else {
					uni.navigateTo({
						url: `/wxcomponents/rankDetails/rankDetails?id=` + el.id
					});
				}
			},
			// 跳转components/yjy
			goDetails(el) {
				console.log(this.LinkType)
				if (this.LinkType == false) {
					uni.navigateTo({
						url: "/wxcomponents/testPage/index?video_id=" + el.id
					});
				} else {
					uni.navigateTo({
						url: "/components/yjy-video-slide/yjy-video-slide?video_id=" + el.id
					});
				}
			},
		},
		
	}
</script>

<style scoped lang="scss">
	.search {
		height: 100rpx;
		background-color: #fff;
		margin-bottom: 10px;
	}

	van-search {
		color: transparent;
		caret-color: transparent;
	}

	.nuter {
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		display: flex;
		justify-content: space-around;
		font-size: 35rpx;
		margin-bottom: 20rpx;
	}

	.nuter view {
		flex: 1;
		font-size: 30rpx;
		text-align: center;
		transition: all 0.5s ease .1s;
		background-color: #f0f0f0;
	}

	.active {
		box-sizing: border-box;
		color: #007AFF;
		border-bottom: 5rpx solid #00aaff;
		background-color: #f3ffff;
		border-radius: 10rpx;
		box-shadow: 3px 3px 5px #888888;
	}

	.swiper {
		height: calc(100vh - 220rpx);
		width: 100%;
		overflow: hidden;
		// text-align: center;
	}

	.swiper-item {
		overflow-y: scroll;
		width: 99.5%;
		height: 99%;
		background-color: white;
		/* height: 99%; */
		box-sizing: border-box;
		padding: 1rpx;
		padding: 0px 30rpx;
	}

	/* 	.content {
		
	} */

	.icon {
		width: 60rpx;
		// height: 40rpx;
	}
	.icon-view{
		min-height: 80rpx;
		display: flex;
		align-items: center;
	}
	.icon-text {
		color: #9a9a9a;
		font-size: 28rpx;
	}

	.swiper-dot {
		z-index: 1000;

		.swiper-box {
			height: 350rpx;
		}

		.image {
			width: 100%;
			height: 100%;

			image {
				width: 100%;
				height: 100%;
				border-radius: 12rpx;
			}
		}
	}

	.selectBox {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.selectBox:after {
		display: block;
		content: "";
		width: 48%;
		height: 0px;
	}

	.selectItem {
		width: 48%;
		margin-bottom: 20rpx;
		border: 1px solid #EAEAEA;
		border-radius: 10rpx;
		// height: 550rpx;
		position: relative;
		overflow: hidden;
		image{
			vertical-align: middle;
		}
	}

	.label {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 100;
		background-color: #D5C618;
		color: #FFFFFF;
		width: 80rpx;
		height: 40rpx;
		line-height: 40rpx;
		font-size: 24rpx;
		text-align: center;
		border-radius: 10rpx 0 10rpx 0rpx;
		font-weight: bold;
	}

	.title_label {
		color: #FFFFFF;
		width: 64rpx;
		display: inline-block;
		height: 32rpx;
		line-height: 32rpx;
		font-size: 26rpx;
		text-align: center;
		border-radius: 4rpx;
		font-weight: 400;
	}

	.selectImg {
		width: 100%;
		height: 480rpx;
		border-radius: 10rpx 10rpx 0 0;
	}

	.selectText {
		font-weight: bold;
		font-size: 26rpx;
		height: 50rpx;
		line-height: 50rpx;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
		padding:6rpx 10rpx;
	}
	van-tag{
		margin-right: 5rpx;
	}
</style>
